<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业人格特质评估测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color), var(--warning-color));
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        h1 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-size: 2.2rem;
        }
        
        .intro {
            margin-bottom: 30px;
            color: var(--dark-color);
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid var(--primary-color);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .question-container {
            margin-bottom: 25px;
            padding: 20px;
            border-radius: 8px;
            background-color: #f8f9fa;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        .question-container:hover {
            background-color: #e9ecef;
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }
        
        .question {
            margin-bottom: 15px;
            font-weight: 500;
            font-size: 18px;
        }
        
        .options {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }
        
        .option {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            flex: 1;
            margin: 0 5px;
            transition: all 0.2s;
        }
        
        .option:hover {
            transform: scale(1.05);
        }
        
        .option input {
            margin-bottom: 5px;
            transform: scale(1.2);
        }
        
        .option-label {
            font-size: 12px;
            text-align: center;
            color: #666;
            font-weight: 500;
        }
        
        .option:hover .option-label {
            color: var(--primary-color);
        }
        
        .btn {
            background: linear-gradient(to right, var(--primary-color), #2980b9);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            display: block;
            margin: 30px auto 0;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        .btn:active {
            transform: translateY(-1px);
        }
        
        .btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .progress-container {
            margin-bottom: 30px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .progress-bar {
            height: 12px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(to right, var(--primary-color), var(--success-color));
            width: 0%;
            transition: width 0.5s;
            border-radius: 10px;
        }
        
        .progress-text {
            text-align: right;
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        .results {
            display: none;
            animation: fadeIn 0.8s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .results-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .trait {
            margin-bottom: 25px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid var(--primary-color);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .trait:hover {
            transform: translateX(5px);
        }
        
        .trait-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .trait-name {
            font-weight: bold;
            color: var(--secondary-color);
            font-size: 18px;
        }
        
        .trait-score {
            font-weight: bold;
            color: var(--primary-color);
            background: rgba(52, 152, 219, 0.1);
            padding: 5px 10px;
            border-radius: 20px;
        }
        
        .trait-visual {
            height: 12px;
            background-color: #e0e0e0;
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .trait-visual-fill {
            height: 100%;
            background: linear-gradient(to right, var(--primary-color), var(--success-color));
            border-radius: 10px;
            transition: width 1s ease;
        }
        
        .trait-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .trait-interpretation {
            font-size: 14px;
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            border-left: 3px solid var(--success-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .radar-chart-container {
            margin: 30px 0;
            text-align: center;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        
        .summary {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 25px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid var(--primary-color);
        }
        
        .suggestions {
            background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
            padding: 25px;
            border-radius: 8px;
            border-left: 4px solid var(--warning-color);
            margin-bottom: 20px;
        }
        
        .suggestions h3 {
            color: var(--warning-color);
            margin-bottom: 15px;
        }
        
        .suggestion-item {
            margin-bottom: 10px;
            padding-left: 15px;
            border-left: 2px solid var(--warning-color);
        }
        
        .share-section {
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        
        .share-btn {
            background: linear-gradient(to right, var(--primary-color), #2980b9);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 5px;
            transition: all 0.3s;
        }
        
        .share-btn:hover {
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .options {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .option {
                flex-direction: row;
                margin-bottom: 10px;
                width: 100%;
            }
            
            .option input {
                margin-right: 10px;
                margin-bottom: 0;
            }
            
            .trait-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .trait-score {
                margin-top: 5px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>专业人格特质评估测试</h1>
            <p>基于心理学大五人格模型的深度性格分析</p>
        </header>
        
        <div class="intro">
            <p>本测试基于心理学中广泛认可的大五人格模型，通过50个精心设计的问题，深入评估您在五个核心人格维度上的特点。每个维度都包含详细的解释和个性化的解读，帮助您全面了解自己的性格特质。</p>
            <p>测试大约需要10-15分钟完成。请根据每个问题的描述，选择最符合您实际情况的选项。答案没有对错之分，请尽量诚实地回答所有问题，以获得最准确的结果。</p>
        </div>
        
        <div class="progress-container">
            <div class="progress-text">
                <span>测试进度</span>
                <span id="progress">0</span>/50
            </div>
            <div class="progress-bar">
                <div class="progress" id="progress-bar"></div>
            </div>
        </div>
        
        <form id="personality-test">
            <!-- 问题将通过JavaScript动态生成 -->
        </form>
        
        <button class="btn" id="submit-btn" disabled>查看详细结果</button>
        
        <div class="results" id="results">
            <div class="results-header">
                <h2>您的性格分析报告</h2>
                <p>基于大五人格模型的深度解读</p>
            </div>
            
            <div class="summary" id="summary">
                <!-- 总体总结将通过JavaScript动态生成 -->
            </div>
            
            <div class="radar-chart-container">
                <canvas id="radar-chart" width="400" height="300"></canvas>
            </div>
            
            <div id="traits-container">
                <!-- 特质分析将通过JavaScript动态生成 -->
            </div>
            
            <div class="suggestions">
                <h3>个人发展建议</h3>
                <div id="suggestions-container">
                    <!-- 发展建议将通过JavaScript动态生成 -->
                </div>
            </div>
            
            <div class="share-section">
                <h3>分享您的测试结果</h3>
                <p>与朋友分享，了解彼此的性格特点</p>
                <button class="share-btn" id="copy-link">复制测试链接</button>
                <button class="share-btn" id="share-twitter">分享到Twitter</button>
                <button class="share-btn" id="share-facebook">分享到Facebook</button>
            </div>
            
            <button class="btn" id="restart-btn">重新测试</button>
        </div>
    </div>

    <script>
        // 人格特质维度定义
        const traits = {
            openness: {
                name: "开放性",
                description: "反映个体对新事物、新思想和体验的接受程度。",
                score: 0,
                interpretation: {
                    low: "您倾向于实际、传统和务实。您更喜欢熟悉的事物和常规，对新奇和抽象概念持谨慎态度。这种特质使您在需要稳定性和可预测性的环境中表现出色。",
                    medium: "您在开放性和传统性之间保持了良好的平衡。您对新体验持开放态度，但不会盲目追求新奇。您能欣赏艺术和抽象思维，同时也重视实际应用。",
                    high: "您富有想象力、好奇心强且喜欢尝试新事物。您对艺术、情感和抽象概念有深刻理解，常常是创新的推动者。这种特质使您在需要创造力和灵活思维的环境中表现出色。"
                },
                suggestions: {
                    low: "尝试定期接触新的文化、思想或活动，即使它们最初让您感到不适。",
                    medium: "继续保持对新体验的开放态度，同时注意平衡新奇与实用性。",
                    high: "利用您的创造力解决问题，但要确保您的想法能够在现实中实施。"
                }
            },
            conscientiousness: {
                name: "尽责性",
                description: "反映个体的组织性、可靠性和目标导向程度。",
                score: 0,
                interpretation: {
                    low: "您更随性、灵活且可能缺乏计划性。您倾向于顺其自然，不喜欢受到严格规则和计划的约束。这种特质使您在需要适应性和灵活性的环境中表现出色。",
                    medium: "您在条理性和灵活性之间保持了良好的平衡。您能够制定计划并执行，但也能适应变化。您负责任但不会过度拘泥于细节。",
                    high: "您有条理、负责任、自律且注重细节。您设定明确目标并努力实现，是可靠和值得信赖的人。这种特质使您在需要精确性和可靠性的环境中表现出色。"
                },
                suggestions: {
                    low: "尝试为重要任务制定简单计划，以提高效率。",
                    medium: "继续保持计划性与灵活性的平衡，这在多变的环境中特别有价值。",
                    high: "您的组织能力是宝贵资产，但要避免对细节过度关注而忽略大局。"
                }
            },
            extraversion: {
                name: "外向性",
                description: "反映个体的社交活跃度和精力水平。",
                score: 0,
                interpretation: {
                    low: "您更安静、内向且喜欢独处。您在小型亲密群体中感到最舒适，社交活动后可能需要时间恢复精力。这种特质使您在需要深度思考和专注的环境中表现出色。",
                    medium: "您在社交活跃度和独处时间之间保持了良好的平衡。您能享受社交活动，但也重视个人空间和安静时间。",
                    high: "您健谈、自信且喜欢社交场合。您从与他人互动中获得能量，通常是团体中的活跃分子。这种特质使您在需要人际交往和领导力的环境中表现出色。"
                },
                suggestions: {
                    low: "尝试偶尔参与小型社交活动，逐步扩展舒适区。",
                    medium: "继续保持社交与独处的平衡，这对身心健康非常重要。",
                    high: "利用您的社交能力建立关系网络，但要确保给自己留出反思和恢复的时间。"
                }
            },
            agreeableness: {
                name: "宜人性",
                description: "反映个体与他人相处时的合作性和友善程度。",
                score: 0,
                interpretation: {
                    low: "您更直接、批判性强且竞争意识强。您倾向于坚持自己的观点，不会为了避免冲突而妥协。这种特质使您在需要果断决策和坚定立场的环境中表现出色。",
                    medium: "您在合作性和坚定性之间保持了良好的平衡。您能体谅他人，但也会坚持自己的立场。",
                    high: "您富有同情心、乐于助人且信任他人。您重视和谐关系，通常会考虑他人的需求和感受。这种特质使您在需要团队合作和支持他人的环境中表现出色。"
                },
                suggestions: {
                    low: "尝试在表达不同意见时考虑对方的感受，这有助于建立更有效的关系。",
                    medium: "继续保持坚定与合作之间的平衡，这在领导角色中特别有价值。",
                    high: "您的同理心是宝贵资产，但要学会在必要时设定界限，保护自己的利益。"
                }
            },
            neuroticism: {
                name: "情绪稳定性",
                description: "反映个体情绪稳定性和应对压力的能力。",
                score: 0,
                interpretation: {
                    low: "您情绪稳定、冷静且抗压能力强。您不容易感到焦虑或沮丧，即使在压力下也能保持镇定。这种特质使您在高压和不可预测的环境中表现出色。",
                    medium: "您在情绪反应上保持了良好的平衡。您会体验正常的情绪波动，但通常能有效管理压力。",
                    high: "您容易焦虑、情绪波动大且对压力敏感。您可能过度担心或容易感到不安。这种特质使您对潜在问题有高度警觉，但需要学习有效的压力管理技巧。"
                },
                suggestions: {
                    low: "您的情绪稳定性是宝贵资产，但要确保不会忽视合理的担忧和风险。",
                    medium: "继续保持情绪觉察与稳定的平衡，这对整体幸福感非常重要。",
                    high: "练习正念和压力管理技巧，如深呼吸和冥想，帮助调节情绪反应。"
                }
            }
        };

        // 测试问题
        const questions = [
            { text: "我喜欢尝试新事物和体验。", trait: "openness", reverse: false },
            { text: "我做事有条理，喜欢提前计划。", trait: "conscientiousness", reverse: false },
            { text: "在社交场合中，我通常很活跃。", trait: "extraversion", reverse: false },
            { text: "我倾向于相信他人是善意的。", trait: "agreeableness", reverse: false },
            { text: "我经常感到焦虑或担忧。", trait: "neuroticism", reverse: false },
            { text: "我对艺术和美学有浓厚兴趣。", trait: "openness", reverse: false },
            { text: "我做事认真负责，很少拖延。", trait: "conscientiousness", reverse: false },
            { text: "我喜欢成为众人关注的焦点。", trait: "extraversion", reverse: false },
            { text: "我乐于帮助他人，即使会给自己带来不便。", trait: "agreeableness", reverse: false },
            { text: "我容易感到紧张或压力大。", trait: "neuroticism", reverse: false },
            { text: "我喜欢思考抽象的概念和想法。", trait: "openness", reverse: false },
            { text: "我注重细节，做事力求完美。", trait: "conscientiousness", reverse: false },
            { text: "我觉得与人交谈很轻松自在。", trait: "extraversion", reverse: false },
            { text: "我通常能体谅他人的感受。", trait: "agreeableness", reverse: false },
            { text: "我的情绪容易波动。", trait: "neuroticism", reverse: false },
            { text: "我喜欢探索新的地方和文化。", trait: "openness", reverse: false },
            { text: "我按时完成任务，遵守承诺。", trait: "conscientiousness", reverse: false },
            { text: "在团体中，我常常是发起活动的人。", trait: "extraversion", reverse: false },
            { text: "我倾向于与他人合作而非竞争。", trait: "agreeableness", reverse: false },
            { text: "我容易感到沮丧或情绪低落。", trait: "neuroticism", reverse: false },
            { text: "我喜欢尝试不同的食物和口味。", trait: "openness", reverse: false },
            { text: "我做事有始有终，不轻易放弃。", trait: "conscientiousness", reverse: false },
            { text: "我喜欢参加社交活动和聚会。", trait: "extraversion", reverse: false },
            { text: "我通常能看到他人好的一面。", trait: "agreeableness", reverse: false },
            { text: "我容易感到不安或紧张。", trait: "neuroticism", reverse: false },
            { text: "我对新奇的想法和概念感兴趣。", trait: "openness", reverse: false },
            { text: "我做事前会仔细考虑后果。", trait: "conscientiousness", reverse: false },
            { text: "我喜欢认识新朋友。", trait: "extraversion", reverse: false },
            { text: "我尽量避免与他人发生冲突。", trait: "agreeableness", reverse: false },
            { text: "我容易感到羞愧或尴尬。", trait: "neuroticism", reverse: false },
            { text: "我喜欢尝试不同的解决问题方法。", trait: "openness", reverse: false },
            { text: "我保持环境整洁有序。", trait: "conscientiousness", reverse: false },
            { text: "我说话声音大且充满活力。", trait: "extraversion", reverse: false },
            { text: "我通常对他人持宽容态度。", trait: "agreeableness", reverse: false },
            { text: "我容易感到愤怒或烦躁。", trait: "neuroticism", reverse: false },
            { text: "我喜欢思考哲学问题。", trait: "openness", reverse: false },
            { text: "我设定明确的目标并努力实现。", trait: "conscientiousness", reverse: false },
            { text: "我喜欢成为团体中的中心人物。", trait: "extraversion", reverse: false },
            { text: "我通常信任他人的动机。", trait: "agreeableness", reverse: false },
            { text: "我容易感到不知所措。", trait: "neuroticism", reverse: false },
            { text: "我喜欢尝试新的兴趣爱好。", trait: "openness", reverse: false },
            { text: "我做事认真细致。", trait: "conscientiousness", reverse: false },
            { text: "我觉得独处时间太长会感到无聊。", trait: "extraversion", reverse: false },
            { text: "我通常考虑他人的需求。", trait: "agreeableness", reverse: false },
            { text: "我容易感到自卑或不足。", trait: "neuroticism", reverse: false },
            { text: "我喜欢探索不同的观点和想法。", trait: "openness", reverse: false },
            { text: "我遵循规则和程序。", trait: "conscientiousness", reverse: false },
            { text: "我享受在人群中的感觉。", trait: "extraversion", reverse: false },
            { text: "我倾向于看到他人的优点。", trait: "agreeableness", reverse: false },
            { text: "我容易感到紧张或担忧。", trait: "neuroticism", reverse: false }
        ];

        // 初始化测试
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('personality-test');
            const progressText = document.getElementById('progress');
            const progressBar = document.getElementById('progress-bar');
            const submitBtn = document.getElementById('submit-btn');
            const results = document.getElementById('results');
            const traitsContainer = document.getElementById('traits-container');
            const summaryContainer = document.getElementById('summary');
            const suggestionsContainer = document.getElementById('suggestions-container');
            const restartBtn = document.getElementById('restart-btn');
            const copyLinkBtn = document.getElementById('copy-link');
            const shareTwitterBtn = document.getElementById('share-twitter');
            const shareFacebookBtn = document.getElementById('share-facebook');
            
            // 生成问题
            questions.forEach((question, index) => {
                const questionDiv = document.createElement('div');
                questionDiv.className = 'question-container';
                
                const questionText = document.createElement('div');
                questionText.className = 'question';
                questionText.textContent = `${index + 1}. ${question.text}`;
                questionDiv.appendChild(questionText);
                
                const optionsDiv = document.createElement('div');
                optionsDiv.className = 'options';
                
                // 创建5个选项
                for (let i = 1; i <= 5; i++) {
                    const optionDiv = document.createElement('div');
                    optionDiv.className = 'option';
                    
                    const input = document.createElement('input');
                    input.type = 'radio';
                    input.name = `question-${index}`;
                    input.value = i;
                    input.id = `question-${index}-option-${i}`;
                    
                    const label = document.createElement('label');
                    label.className = 'option-label';
                    label.htmlFor = `question-${index}-option-${i}`;
                    
                    // 设置标签文本
                    switch(i) {
                        case 1: label.textContent = '非常不同意'; break;
                        case 2: label.textContent = '不同意'; break;
                        case 3: label.textContent = '中立'; break;
                        case 4: label.textContent = '同意'; break;
                        case 5: label.textContent = '非常同意'; break;
                    }
                    
                    optionDiv.appendChild(input);
                    optionDiv.appendChild(label);
                    optionsDiv.appendChild(optionDiv);
                }
                
                questionDiv.appendChild(optionsDiv);
                form.appendChild(questionDiv);
            });
            
            // 更新进度
            function updateProgress() {
                const answered = document.querySelectorAll('input[type="radio"]:checked').length;
                progressText.textContent = answered;
                progressBar.style.width = `${(answered / questions.length) * 100}%`;
                
                // 如果所有问题都已回答，启用提交按钮
                submitBtn.disabled = answered !== questions.length;
            }
            
            // 监听选项变化
            document.querySelectorAll('input[type="radio"]').forEach(input => {
                input.addEventListener('change', updateProgress);
            });
            
            // 提交测试
            submitBtn.addEventListener('click', function() {
                // 重置分数
                Object.keys(traits).forEach(trait => {
                    traits[trait].score = 0;
                });
                
                // 计算分数
                questions.forEach((question, index) => {
                    const selectedOption = document.querySelector(`input[name="question-${index}"]:checked`);
                    if (selectedOption) {
                        let score = parseInt(selectedOption.value);
                        
                        // 如果是反向计分的问题
                        if (question.reverse) {
                            score = 6 - score;
                        }
                        
                        traits[question.trait].score += score;
                    }
                });
                
                // 显示结果
                form.style.display = 'none';
                submitBtn.style.display = 'none';
                results.style.display = 'block';
                
                // 生成总体总结
                generateSummary();
                
                // 生成雷达图
                generateRadarChart();
                
                // 生成特质分析
                generateTraitAnalysis();
                
                // 生成发展建议
                generateSuggestions();
            });
            
            // 生成总体总结
            function generateSummary() {
                // 找出得分最高和最低的特质
                let highestTrait = null;
                let lowestTrait = null;
                
                Object.keys(traits).forEach(trait => {
                    if (!highestTrait || traits[trait].score > traits[highestTrait].score) {
                        highestTrait = trait;
                    }
                    if (!lowestTrait || traits[trait].score < traits[lowestTrait].score) {
                        lowestTrait = trait;
                    }
                });
                
                // 计算每个特质的百分比
                const traitPercentages = {};
                Object.keys(traits).forEach(trait => {
                    traitPercentages[trait] = (traits[trait].score / 50) * 100;
                });
                
                // 生成总结文本
                let summaryHTML = `<h3>总体性格特征</h3>`;
                summaryHTML += `<p>您的性格在<strong>${traits[highestTrait].name}</strong>维度上表现最为突出，这反映了您${getTraitLevelDescription(highestTrait)}。同时，您在<strong>${traits[lowestTrait].name}</strong>维度上相对较低，表明您${getTraitLevelDescription(lowestTrait, true)}。</p>`;
                
                // 添加更多总结信息
                summaryHTML += `<p>总体而言，您的人格特质组合形成了独特的性格轮廓，这会影响您的工作方式、人际关系和应对挑战的策略。以下是对您五个核心人格维度的详细分析：</p>`;
                
                summaryContainer.innerHTML = summaryHTML;
            }
            
            // 获取特质水平描述
            function getTraitLevelDescription(trait, isLowest = false) {
                const percentage = (traits[trait].score / 50) * 100;
                
                if (isLowest) {
                    if (percentage < 40) return "倾向于这一特质的对立面";
                    if (percentage < 60) return "在这一特质上表现中等";
                    return "在这一特质上表现较高";
                } else {
                    if (percentage > 80) return "非常显著";
                    if (percentage > 60) return "较为显著";
                    return "中等程度";
                }
            }
            
            // 生成雷达图
            function generateRadarChart() {
                const ctx = document.getElementById('radar-chart').getContext('2d');
                
                // 准备数据
                const labels = Object.keys(traits).map(trait => traits[trait].name);
                const data = Object.keys(traits).map(trait => (traits[trait].score / 50) * 100);
                
                new Chart(ctx, {
                    type: 'radar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '您的得分',
                            data: data,
                            backgroundColor: 'rgba(52, 152, 219, 0.2)',
                            borderColor: 'rgba(52, 152, 219, 1)',
                            pointBackgroundColor: 'rgba(52, 152, 219, 1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(52, 152, 219, 1)'
                        }]
                    },
                    options: {
                        scale: {
                            ticks: {
                                beginAtZero: true,
                                max: 100,
                                min: 0
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return `${context.label}: ${Math.round(context.raw)}%`;
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            // 生成特质分析
            function generateTraitAnalysis() {
                traitsContainer.innerHTML = '';
                
                Object.keys(traits).forEach(trait => {
                    const traitDiv = document.createElement('div');
                    traitDiv.className = 'trait';
                    
                    const traitHeader = document.createElement('div');
                    traitHeader.className = 'trait-header';
                    
                    const traitName = document.createElement('div');
                    traitName.className = 'trait-name';
                    traitName.textContent = traits[trait].name;
                    
                    const traitScore = document.createElement('div');
                    traitScore.className = 'trait-score';
                    traitScore.textContent = `${traits[trait].score}/50`;
                    
                    traitHeader.appendChild(traitName);
                    traitHeader.appendChild(traitScore);
                    
                    const traitVisual = document.createElement('div');
                    traitVisual.className = 'trait-visual';
                    
                    const traitVisualFill = document.createElement('div');
                    traitVisualFill.className = 'trait-visual-fill';
                    // 使用setTimeout实现动画效果
                    setTimeout(() => {
                        traitVisualFill.style.width = `${(traits[trait].score / 50) * 100}%`;
                    }, 100);
                    
                    traitVisual.appendChild(traitVisualFill);
                    
                    const traitDescription = document.createElement('div');
                    traitDescription.className = 'trait-description';
                    traitDescription.textContent = traits[trait].description;
                    
                    const traitInterpretation = document.createElement('div');
                    traitInterpretation.className = 'trait-interpretation';
                    
                    // 根据得分选择解释
                    const percentage = (traits[trait].score / 50) * 100;
                    let interpretation;
                    
                    if (percentage < 40) {
                        interpretation = traits[trait].interpretation.low;
                    } else if (percentage < 70) {
                        interpretation = traits[trait].interpretation.medium;
                    } else {
                        interpretation = traits[trait].interpretation.high;
                    }
                    
                    traitInterpretation.textContent = interpretation;
                    
                    traitDiv.appendChild(traitHeader);
                    traitDiv.appendChild(traitVisual);
                    traitDiv.appendChild(traitDescription);
                    traitDiv.appendChild(traitInterpretation);
                    
                    traitsContainer.appendChild(traitDiv);
                });
            }
            
            // 生成发展建议
            function generateSuggestions() {
                suggestionsContainer.innerHTML = '';
                
                Object.keys(traits).forEach(trait => {
                    const percentage = (traits[trait].score / 50) * 100;
                    let suggestion;
                    
                    if (percentage < 40) {
                        suggestion = traits[trait].suggestions.low;
                    } else if (percentage < 70) {
                        suggestion = traits[trait].suggestions.medium;
                    } else {
                        suggestion = traits[trait].suggestions.high;
                    }
                    
                    const suggestionItem = document.createElement('div');
                    suggestionItem.className = 'suggestion-item';
                    suggestionItem.textContent = `${traits[trait].name}: ${suggestion}`;
                    
                    suggestionsContainer.appendChild(suggestionItem);
                });
            }
            
            // 分享功能
            copyLinkBtn.addEventListener('click', function() {
                const currentUrl = window.location.href;
                navigator.clipboard.writeText(currentUrl).then(() => {
                    copyLinkBtn.textContent = '已复制!';
                    setTimeout(() => {
                        copyLinkBtn.textContent = '复制测试链接';
                    }, 2000);
                });
            });
            
            shareTwitterBtn.addEventListener('click', function() {
                const text = '我刚刚完成了一个专业的人格特质评估测试，了解了自己的性格特点！你也来试试吧：';
                const url = window.location.href;
                window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
            });
            
            shareFacebookBtn.addEventListener('click', function() {
                const url = window.location.href;
                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
            });
            
            // 重新开始测试
            restartBtn.addEventListener('click', function() {
                // 重置表单
                form.reset();
                form.style.display = 'block';
                submitBtn.style.display = 'block';
                results.style.display = 'none';
                updateProgress();
                
                // 重置分享按钮文本
                copyLinkBtn.textContent = '复制测试链接';
            });
            
            // 初始更新进度
            updateProgress();
        });
    </script>
</body>
</html>